<template>
	<view class="flex-column" style="height: 90vh; padding: 20px;">
		<!-- 文本框 -->
		<view class="topView gColor" style=" height: 150px; ">
			<textarea class="custom-textarea" style="color: rgb(105, 105, 105); font-size: 36rpx;"
				placeholder-style="font-size: 34rpx;" v-model="value" :placeholder="placeholder" />
		</view>
		<!-- 添加图片 -->
		<view class="row-lineConter" style="margin-top: 20px;">
			<!--  -->
			<view v-if="imageUrl == null" @click="addImageClick()" class="addImageBtn column-levelCenter gColor"
				style="flex-shrink: 0; justify-content: center; width: 150rpx; height: 150rpx;  border-radius: 8rpx;">
				<view class="blockTextColor" style="font-size: 40rpx; font-weight: bold;">
					+
				</view>
				<view class="blockTextColor " style="margin-top: 10rpx; font-size: 20rpx;">
					上传图片
				</view>
			</view>
			<view v-if="imageUrl != null" class="row-lineConter">
				<image style="width: 150rpx; height: 150rpx;" :src="imageUrl" mode=""></image>
				<view @click="deleteImageClick()" class="zsConter deleteBtn ">
					删除
				</view>
			</view>
		</view>

		<view class="column-levelCenter" style="margin-top: auto;">
			<view @click="submitBtnClick()" class="releaseBtn mainBgColor zsConter">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				placeholder: '请输入意见内容',
				imageUrl: null,
				contentModel: {}
			}
		},

		methods: {
			addImageClick() {
				this.$publicApi.chooseImage().then(filePath => {
					this.$publicApi.uploadImage(filePath).then(url => {
						this.imageUrl = url;
					}).catch(err => {

					});
				}).catch(err => {

				});
			},

			deleteImageClick() {
				this.imageUrl = null;
			},
			submitBtnClick() {
				var model = {}
				model.suggestionContent = this.value;
				if (this.imageUrl != null) {
					model.imageUrl = this.imageUrl;
				}
				const timestamp = new Date().getTime();
				model.releaseTime = timestamp.toString();
				if (this.value == '') {
					uni.showToast({
						title: '请输入建议内容',
						icon: 'error'
					});
					return
				}
				uni.showLoading({
					title: '提交中...'
				})
				this.$uniCloudApi.add_suggestion_data(model).then(res => {
					uni.hideLoading()
					this.$showToast('提交成功')
					setTimeout(function() {
						uni.navigateBack();
					}, 1000);

				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'fail'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topView {
		padding: 8px;
		// background-color: gainsboro;
		border-radius: 6px;
	}

	.custom-textarea {
		max-width: 100%;
		max-height: 100%;
		/* 确保最大宽度不超过100% */
	}

	.releaseBtn {
		margin-top: 30rpx;
		color: white;
		width: 80%;
		font-size: 36rpx;
		height: 100rpx;
		border-radius: 50rpx;
		box-shadow: 0rpx 0rpx 20rpx rgb(52, 116, 246);

	}

	.gColor {
		background-color: rgb(244, 245, 247);
	}

	.deleteBtn {
		margin-left: 20rpx;
		color: white;
		font-size: 20rpx;
		height: 40rpx;
		padding: 0rpx 20rpx;
		border-radius: 8rpx;
		background-color: orangered;
	}

	.addImageBtn {
		border: 1px solid rgb(239, 239, 239);
		/* 设置1像素的黑色实线边框 */
		background-color: rgb(250, 250, 250);
		border-radius: 8rpx;
	}
</style>